<template>
  <el-button type="primary" @click="dialogForm">新增用户</el-button>
<el-table :data="UserData" style="width: 100%">
 <el-table-column prop="userId" label="用户编号" width="100" />
 <el-table-column prop="userName" label="用户名称" width="100" />
 <el-table-column prop="roleNames" label="所属角色" width="150" />
 <el-table-column prop="isLocked" label="是否锁定" width="100" >
  <template #default="{row}">
   <el-tag v-if="row.isLocked==0" type="success" effect="dark">{{ row.isLocked ? '已锁定' : '未锁定' }}</el-tag>
   <el-tag v-if="row.isLocked==1" type="danger" effect="dark">{{ row.isLocked ? '已锁定' : '未锁定' }}</el-tag>
  </template>
  </el-table-column>
 <el-table-column prop="createDate" label="创建时间" width="120" >
  <template #default="{row}">
    {{ moment(row.createDate).format('YYYY-MM-DD HH:mm:ss') }}
  </template>
  </el-table-column>
 <el-table-column  label="操作" >
  <template #default="{row}">
    <el-button type="danger" @click="delUser(row.userId)">删除</el-button>
    <el-button type="warning" @click="dialogUpForm(row.userId)">编辑</el-button>
  </template>
  </el-table-column>
</el-table>

<table>
  <tr>
    <td>
      <el-pagination
    v-model:current-page="page.PageIndex"
    v-model:page-size="page.PageSize"
    :page-sizes="[1, 2, 3, 5]"
    :background="true"
    layout="slot, sizes"
    :total="page.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  共{{ page.totalCount }}条，每页{{ page.PageSize }}条，
  当前第{{ page.PageIndex }}/{{ page.totalPage }}页
  </el-pagination>
    </td>
    <td>
      <el-pagination
    v-model:current-page="page.PageIndex"
    v-model:page-size="page.PageSize"
    :page-sizes="[1, 2, 3, 5]"
    :background="true"
    layout="slot, prev, pager, next"
    :total="page.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    prev-text="上一页"
    next-text="下一页"
  >
  <el-button type="primary" @click="handleCurrentChange(1)" :disabled="page.PageIndex==1">首页</el-button>
  </el-pagination>
    </td>
    <td>
      <el-pagination
    v-model:current-page="page.PageIndex"
    v-model:page-size="page.PageSize"
    :page-sizes="[1, 2, 3, 5]"
    :background="true"
    layout="slot, jumper"
    :total="page.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  <el-button type="primary" @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage">尾页</el-button>
  </el-pagination>
    </td>
  </tr>
</table>
<!-- 新增用户 -->
<el-dialog v-model="dialogFormVisible" title="新增用户" width="500">
  <el-form :model="form">
    <el-form-item label="用户名称" :label-width="formLabelWidth">
      <el-input v-model="form.userName" />
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item label="所属角色" :label-width="formLabelWidth">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in RoleData" :label="item.roleName" :value="item.roleId" />
    </el-checkbox-group>
    </el-form-item>
    </el-form>
    <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="addUser">
        新增
      </el-button>
    </div>
  </template>
</el-dialog>

  <!-- 编辑用户 -->
  <el-dialog v-model="dialogUpFormVisible" title="编辑用户" width="500">
  <el-form :model="upform">
    <el-form-item label="用户名称" :label-width="formLabelWidth">
      <el-input v-model="upform.userName" />
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="upform.password" type="password" />
    </el-form-item>
    <el-form-item label="所属角色" :label-width="formLabelWidth">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in RoleData" :label="item.roleName" :value="item.roleId" />
    </el-checkbox-group>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogUpFormVisible = false">取消</el-button>
      <el-button type="primary" @click="upUser">
        确定
      </el-button>
    </div>
  </template>
</el-dialog>


</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
const useStore=useCounterStore();
import { useRouter } from 'vue-router';
const router = useRouter();
import { api1, api2 } from '@/main';
import moment from 'moment';
//@ts-ignore
import Cookies from 'js-cookie'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const dialogUpFormVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const checkList=ref<number[]>([]);

const form = reactive({
  userName: "",
  password: "",
  roleIds: ""
})
const dialogForm=()=>{
dialogFormVisible.value=true;
form.userName="";
form.password="";
checkList.value=[];
}
const addUser=()=>{
 form.roleIds=checkList.value.join(",");
 api2.post('/api/User/InsertUser',form)
.then(res=>{
  if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    dialogFormVisible.value=false;
    loadData();
  }
  else
  {
    ElMessage.error(res.data.msg);
    dialogFormVisible.value=false;
  }
})
}
const delUser=(userId:number)=>{
ElMessageBox.confirm(
  '确定删除该用户?',
  'Warning',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
  .then(() => {
    api2.delete('/api/User/DeleteUser?id='+userId)
.then(res=>{
   if(res.data.isSuc)
   {
     ElMessage.success(res.data.msg);
     loadData();
   }
   else
   {
     ElMessage.error(res.data.msg);
   }
})
  })
}
const upform=ref({
  userId:0,
  userName: "",
  password: "",
  roleIds: ""
})
const dialogUpForm=(userId:number)=>{
useStore.UserInfoId=userId;
dialogUpFormVisible.value=true;
api1.get('/api/User/BackUser',{
  params:{
    UserId:userId
  }
})
.then(res=>{
  upform.value.userName=res.data.data.userName;
  upform.value.password=res.data.data.password;
  checkList.value=res.data.data.roleIds.split(",").map((id:string) => Number(id.trim()));
  console.log(checkList.value);
})

}
const upUser=()=>{
upform.value.userId=useStore.UserInfoId;
upform.value.roleIds=checkList.value.join(",");
api2.put('/api/User/UpdateUser',upform.value)
.then(res=>{
  if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    dialogUpFormVisible.value=false;
    upform.value.userName="";
    upform.value.password="";
    checkList.value=[];
    loadData();
  }
  else
  {
    ElMessage.error(res.data.msg);
    dialogUpFormVisible.value=false;
    upform.value.userName="";
    upform.value.password="";
    checkList.value=[];
  }
})
}


interface UserInfo{
   userId: 1,
   userName: "",
   isLocked: "",
   roleNames: "",
   createOperatorName: "",
   createDate: ""
}
const UserData=ref<UserInfo[]>([]);
const page=reactive({
PageIndex:1,
PageSize:5,
totalCount:0,
totalPage:0
})

onMounted(()=>{
loadData();
loadRole();
})
const loadData=()=>{
api1.get('/api/User/GetUserList',{
  params:{
    PageIndex:page.PageIndex,
    PageSize:page.PageSize
  }
})
.then(res=>{
  UserData.value=res.data.data.data;
  page.totalCount=res.data.data.totalCount;
  page.totalPage=res.data.data.totalPage;
})
}
const handleSizeChange = (val: number) => {
page.PageSize=val;
loadData();
}
const handleCurrentChange = (val: number) => {
page.PageIndex=val;
loadData();
}
 interface Role{
  roleId: 1,
  roleName: "",
  permissionNames: "",
  createOperatorName: "",
  createDate: ""
}
const RoleData=ref<Role[]>([]);
const loadRole=()=>{
api1.get('/api/User/GetRoleList',{
  params:{
    PageIndex:1,
    PageSize:100
  }
})
.then(res=>{
  RoleData.value=res.data.data.data;
})
}
</script>
